<template>
  <div class="home">
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <van-list>
      <van-cell>加载数据</van-cell>
      <van-cell title="使用日期工具类" :value="`今天是${currentDate}`" />
      <van-cell
        title="点击使用confirm装饰器"
        value="还有更多装饰器哦"
        @click="handleUseDecorator"
      />
    </van-list>
    <van-tabbar v-model="state.active">
      <van-tabbar-item icon="home-o" class="mr-20">
        Home
      </van-tabbar-item>
      <van-tabbar-item icon="search" class="mr-20">
        Find
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" class="mr-20">
        Message
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o">
        Setting
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { reactive, onMounted, computed } from 'vue'
import { getDemoData } from '@/api/home'
// 使用vant 组件
import { List, NoticeBar, Cell, Notify, Tabbar } from 'vant'
// 使用日期工具类
import { format, DATE_FMT } from '@/utils/date'

// 使用装饰器
import { confirm, throttle } from '@/decorator'

export default {
  name: 'Home',
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [NoticeBar.name]: NoticeBar,
    [Notify.name]: Notify,
    [Tabbar.name]: Tabbar
  },
  setup() {
    const state = reactive({
      active: 0
    })

    const currentDate = computed(() => {
      return format(new Date(), DATE_FMT)
    })
    const loadData = async () => {
      await getDemoData()
      Notify({
        message: '数据加载成功',
        type: 'success'
      })
    }
    const handleUseDecorator = () => {
      console.log('执行decorator方法')
    }

    onMounted(() => {
      loadData()
      confirm('这是通过装饰器添加的确认信息', '提示')
      throttle()
    })

    return {
      state,
      currentDate,
      handleUseDecorator
    }
  }
}
</script>
<style lang="stylus" scoped>
.home {
  font-size: 14px;
  .bottom-bar {
    height: 50px;
  }
}
</style>
